🐥 新手開發日記
本系列文章紀錄初學者從零開始建構產品的過程。內容以基礎觀念實作與學習筆記為主，如果發現內容較為簡單，(沒錯！你是對的xD！)還請多多包涵。

在翻閱 Bootstrap 官方文件時，會發現 Components 中的 Navs & Tabs 提供了非常便利的頁籤切換機制，讓使用者點擊選單按鈕時能直接切換相對應的內容。

官方主要提供了兩種常見的呈現效果：

1. nav-tabs 標籤樣式

適合傳統頁籤風格，帶有底部邊框。

2. nav-pills 膠囊樣式

選中的項目會呈填色狀態，能讓使用者直覺地知道「目前正處於哪一個頁面」。

其中，加上 .flex-column 的 Vertical Pills（垂直膠囊頁籤） 效果最接近我想要的側邊欄佈局：

下面是範例程式碼

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

呈現出來的動態效果如下：

(參考資料：Bootstrap 5 components-list group)

融合 List Group 與 Tab 觸發機制

雖然 Vertical Pills 很便利，但從選單外觀來說，我更偏好上一篇做好的 List Group（列表群組） 邊框質感。

因此我決定：保留上一篇的 List Group 選單樣式，並結合 Navs & Tabs 的切換屬性。

Step 1. 為 List Group 按鈕加上觸發屬性

在原本的 <button> 上加上 id、data-bs-toggle="list" 與 data-bs-target="#id"屬性：

程式碼中的 role 與 aria-* 屬性屬於 WAI-ARIA（無障礙網頁應用標準），能幫助螢幕閱讀器識別選單結構，之後有機會再做相關補充。

<div class="col-md-3">
  <div class="list-group" id="list-tab" role="tablist">
    <button
      type="button"
      class="list-group-item list-group-item-action active"
      id="list-timer-list"
      data-bs-toggle="list"
      data-bs-target="#list-timer"
      role="tab"
      aria-controls="list-timer"
      aria-selected="true"
    >
      計時器
    </button>
    <button
      type="button"
      class="list-group-item list-group-item-action"
      id="list-tasks-list"
      data-bs-toggle="list"
      data-bs-target="#list-tasks"
      role="tab"
      aria-controls="list-tasks"
      aria-selected="false"
    >
      任務列表
    </button>
    <button
      type="button"
      class="list-group-item list-group-item-action"
      id="list-qa-list"
      data-bs-toggle="list"
      data-bs-target="#list-qa"
      role="tab"
      aria-controls="list-qa"
      aria-selected="false"
    >
      常見QA
    </button>
  </div>
</div>

Step 2. 建立右側 Tab 內容區域 (.tab-content)

處理完選單按鈕後，接著建立右側內容區：

1. 外層使用 .tab-content 包裹所有內容容器。

2. 每個子區域加上 .tab-pane 與 .fade（淡入動畫效果）。

3. 設定對應的 id（如 #list-timer），讓左側按鈕的 data-bs-target 可以正確指向。

4. 在預設顯示的頁面上加上 .show.active。

<div class="col-md-9">
  <div class="tab-content" id="nav-tabContent">
    <!-- 1. 計時器內容 -->
    <div
      class="tab-pane fade show active"
      id="list-timer"
      role="tabpanel"
      aria-labelledby="list-timer-list"
    >
      <div class="border p-3">計時器頁面內容</div>
    </div>

    <!-- 2. 任務列表內容 -->
    <div
      class="tab-pane fade"
      id="list-tasks"
      role="tabpanel"
      aria-labelledby="list-tasks-list"
    >
      <div class="border p-3">任務列表頁面內容</div>
    </div>

    <!-- 3. 常見 QA 內容 -->
    <div
      class="tab-pane fade"
      id="list-qa"
      role="tabpanel"
      aria-labelledby="list-qa-list"
    >
      <div class="border p-3">常見 QA 頁面內容</div>
    </div>
  </div>
</div>

小結

透過這樣的組合，我們既保留了 List Group 的樣式，又實現了無需重新整理頁面（SPA 體驗）的流暢切換效果。